<!-- eslint-disable vue/no-mutating-props -->
<template>
  <ve-form-item label="上传文件">
    <UploadFile v-model:fileId="info.policyImgFileId" :fileTypes="['pdf']" :fileIndex="1" />
  </ve-form-item>
  <ve-form-item label="保险单关联门店" required :prop="getFormItemProp('siteId')">
    <remote-select type="site" v-model="info.siteId" v-model:label="info.siteName" allowClear :params="{ oldId: info.siteId }" />
  </ve-form-item>
  <ve-form-item label="保险公司" :prop="getFormItemProp('insureCompany')" required>
    <remote-select type="supplierInsure" v-model:label="info.insureCompanyStr" allowClear v-model="info.insureCompany" />
  </ve-form-item>
  <ve-form-item label="实际保单号">
    <ve-input v-model="info.insureNo" placeholder="请输入" />
  </ve-form-item>
  <ve-form-item label="有效期" :prop="getFormItemProp('lifeSpan')" labelPosition="top" required>
    <ve-daterange-picker
      v-model:start="info.beginDate"
      v-model:end="info.endDate"
      :placeholder="['开始时间', '结束时间']"
      mode="date"
      allowClear
    />
  </ve-form-item>
  <ve-form-item label="被保险人">
    <ve-input v-model="info.insuredPorsen" :maxlength="50" />
  </ve-form-item>
  <ve-form-item label="被保险人证件号">
    <ve-input v-model="info.insuredPorsenCard" :maxlength="30" />
  </ve-form-item>
  <!-- 交强险 -->
  <block v-if="info.insureKind == 0">
    <ve-form-item label="保险费" unit="元">
      <ve-input-number :precision="2" placeholder="请输入" v-model="info.insureAmt" />
    </ve-form-item>
  </block>
  <ve-form-item label="业务员姓名">
    <ve-input v-model="info.experiencedPorsen" :maxlength="20" />
  </ve-form-item>
  <ve-form-item label="业务员电话" :prop="getFormItemProp('experiencedPhone')">
    <ve-input placeholder="请输入" type="tel" :maxlength="11" v-model="info.experiencedPhone" />
  </ve-form-item>
  <!-- 商业险 -->
  <block v-if="info.insureKind == 1">
    <view class="insure-detail-item" v-for="(detailItem, detailIndex) in info.carInsureDetail" :key="detailIndex">
      <view class="insure-detail-item-title">
        <span class="insure-detail-item-title-text">新增险种{{ detailIndex + 1 }}</span>
        <ve-icon name="delete_1" color="rgba(23,22, 22, 1)" :size="36" @click="deleteInsureDetail(info.carInsureDetail, detailIndex)" />
      </view>
      <view class="insure-detail-item-content">
        <ve-form-item label="承保险种">
          <ve-picker-inline
            v-model="detailItem.insureKindType"
            placeholder="请选择"
            :range="sysDict.insure_business_kind_type"
            unit="arrowRight"
          >
          </ve-picker-inline>
        </ve-form-item>
        <ve-form-item label="保额" unit="万元">
          <ve-input-number :precision="2" placeholder="请输入" v-model="detailItem.insuredSum" />
        </ve-form-item>
        <ve-form-item label="保险费" unit="元" :borderBottom="false">
          <ve-input-number :precision="2" placeholder="请输入" v-model="detailItem.insureAmt" />
        </ve-form-item>
      </view>
    </view>
    <view class="add-insure-btn">
      <ve-icon name="plus" :size="30" />
      <span class="add-insure-btn-text" @click="addNewInsure(info.carInsureDetail)">新增险种</span>
    </view>
  </block>
</template>

<script setup>
  import UploadFile from '@/components/upload-file/index.vue'
  import { useSysDict } from '@/hooks/useDict'
  const sysDict = useSysDict(['insure_business_kind_type'])

  const props = defineProps({
    info: {
      type: Object,
      default: () => {},
    },
    filedPrefix: {
      type: String,
      default: '',
    },
  })

  // 获取表单项的prop
  const getFormItemProp = (propStr) => {
    return `${props.filedPrefix}${propStr}`
  }

  // 新增险种
  const addNewInsure = (list) => {
    list.push({})
  }
  // 删除险种
  const deleteInsureDetail = (list, index) => {
    list.splice(index, 1)
  }
</script>

<style lang="scss" scoped>
  .container {
    background: #f7f8fa;
    padding: 24rpx;
  }
  .insure-detail-item {
    background: #f7f8fa;
    .insure-detail-item-title {
      height: 88rpx;
      padding: 0 24rpx;
      background: #f0f1f3;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .insure-detail-item-title-text {
        font-size: 30rpx;
        font-weight: 600;
        color: #191c27;
      }
    }
    .insure-detail-item-content {
      padding: 0 24rpx;
    }
  }
  .insure-detail-item + .insure-detail-item {
    margin-top: 32rpx;
  }
  .add-insure-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 88rpx;
    background: #f3f7ff;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    border: 2rpx solid #3072f6;
    margin-top: 32rpx;
    margin-bottom: 32rpx;
    .add-insure-btn-text {
      font-size: 30rpx;
      color: #3072f6;
      line-height: 1;
      margin-left: 18rpx;
    }
  }
</style>
